<template>
  <div class="bs-wrapper">
    <div class="bs-big-title">
      <div class="big-title-text">企业云服务AI平台</div>
      <div class="bs-calendar">
        <div class="bs-calendar-l">{{ forCalendar.time }}</div>
        <div class="bs-calendar-r">
          <div>{{ forCalendar.day }}</div>
          <div>{{ forCalendar.date }}</div>
        </div>
      </div>
    </div>
    <div class="bs-content">
      <div class="bs-left">
        <intellectual />
        <fundDistribution />
        <businessIncome />
        <!-- <profit :enterpriseOverview="enterpriseOverview" /> -->
        <statusEmployment />
        <incomeDistribution />
        <payDistribution />
      </div>
      <div class="bs-middle">
        <centerMap />
        <!-- <moveDistribution /> -->
      </div>
      <div class="bs-right">
        <lables />
        <target />
        <lifeCircle />
        <innovate />
        <valveModel />
        <separate />
      </div>
    </div>
  </div>
</template>

<script>
import './styles/index.scss'
import { getCurTimeObj } from './components/tools.js'
import centerMap from './components/centerMap.vue'
import intellectual from './components/intellectual.vue'
import fundDistribution from './components/fundDistribution.vue'
import businessIncome from './components/businessIncome.vue'
// import profit from './components/profit.vue'
import statusEmployment from './components/statusEmployment.vue'
import incomeDistribution from './components/incomeDistribution.vue'
import payDistribution from './components/payDistribution.vue'
// import moveDistribution from './components/moveDistribution.vue'
import lables from './components/lables.vue'
import target from './components/target.vue'
import lifeCircle from './components/lifeCircle.vue'
import innovate from './components/innovate.vue'
import valveModel from './components/valveModel.vue'
import separate from './components/separate.vue'

export default {
  name: 'big-screen',
  components: {
    intellectual,
    centerMap,
    fundDistribution,
    businessIncome,
    // profit,
    statusEmployment,
    incomeDistribution,
    payDistribution,
    // moveDistribution,
    lables,
    target,
    lifeCircle,
    innovate,
    valveModel,
    separate
  },
  provide:{
    getBsLRWPercent:(val)=>{
      return `${(val / 1280) * 100}%`
    },
    cardTitleHeight: 30
  },
  data() {
    return {
      forCalendar: {
        date: '',
        day: '',
        time: ''
      },
      calendarTimer: null,
      //
    }
  },
  created() {
    //
    this.renderCalendar()
    this.calendarTimer = setInterval(() => {
      this.renderCalendar()
    }, 1000)
    //
  },
  mounted() {},
  beforeDestroy() {
    clearInterval(this.calendarTimer)
  },
  methods: {
    renderCalendar() {
      const { date, day, time } = getCurTimeObj()
      this.forCalendar = { date, day, time }
    }
  }
}
</script>

<style lang="scss">
@import "./styles/_variables.scss";

.bs-wrapper {
  width: #{$screen_width}px;
  height: #{$screen_height}px;
  margin: 0 auto;
  background-color: #000;
  background-image: url('./assets/bs-bg.png');
  background-size: cover;
  background-position: center;
  color: #fff;
  // font-size: 16px;

  .test-bscard {
    margin-left: 30px;

    // width: 200px;
    // height: 200px;
  }

  .bs-big-title {
    position: relative;
    width: 100%;
    height: 183px;
    background-image: url('./assets/bs-title.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
  }

  .big-title-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
  }

  .bs-calendar{
    position: absolute;
    top: 50%;
    right: wPercent(250);
    transform: translate(0, -5px);
    display: flex;
    align-items: center;
  }

  .bs-calendar-l{
    font-size: 52px;
    line-height: 38px;
    padding-right: 20px;
    border-right: 1px solid #fff;
  }
  .bs-calendar-r{
    font-size: 20px;
    line-height: 24px;
    padding-left: 20px;
  }

  .bs-content{
    display: flex;
    height: 895px;
    padding: 5px 60px 20px 60px;
  }

  .bs-left, .bs-right{
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    width: wPercent(1280, $content_widht);
  }

  .bs-left{
    .bs-card ~ .bs-card{
      margin-top: 15px;
    }
  }
  .bs-right{
    .bs-card:nth-child(n + 3) {
      margin-top: 15px;
    }
  }

  .bs-middle{
    flex: 0 0 auto;
    width: wPercent(1125, $content_widht);
    margin: 0 auto;
  }
}
</style>
